<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artshow-detail.css" />
		<link rel="stylesheet" type="text/css" href="../css/state-icons.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-pull-right iconfont">&#xe619;</a>
			<h1 class="mui-title">帮办详情</h1>
		</header>
		<div class="mui-content">
			<div class="artshow-detail-title">
				<div class="artshow-detail-info">
					<h5 id="title" class="mui-ellipsis"></h5>
					<p><i class="iconfont">&#xe779;</i><span id="city"></span><span id="type"></span></p>
					<p class="mui-ellipsis">起始 : <span id="time"></span></p>
					<p class="mui-ellipsis">截止 : <span id="time_end"></span></p>
				</div>
				<img class="mui-pull-right" id="artshowPic"/>
			</div>
			<div class="artshow-detail-signup-list">
				<h5>报名列表<span class="mui-pull-right">报名人数：<span id="signUpNum"></span></span></h5>
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<ul id="artist-list">
							<!--<li><img src="../images/jinchi.png" /><br /><span class="mui-ellipsis">金池a挥洒大苏打撒谎艰苦撒旦</span></li>-->
						</ul>
					</div>
				</div>
			</div>
			<div class="artshow-detail-info-area">
				<h5>基本信息</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<label>活动人数：</label><span id="numberOfApplicants"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>性别：</label><span id="gender"></span>
					</li>
					<li class="mui-table-view-cell mui-hidden">
						<label>身材要求：</label><span id="stature"></span>
					</li>
					<li class="mui-table-view-cell  mui-hidden">
						<label>语言类型：</label><span id="language"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>联系人：</label><span id="contacts"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>联系方式：</label><span id="contactway"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>薪酬：</label><span id="salary"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>活动要求：</label>
						<p id="require"></p>
					</li>
					<li class="mui-table-view-cell">
						<label>报酬说明：</label>
						<p id="salaryDescription"></p>
					</li>
				</ul>
			</div>
			<div class="artshow-detail-info-area entry-state">
				<h5>
					我的报名信息<span class="state state-icon"></span>
				</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<label>报名时间：</label><span id="entryTime"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>报价：</label><span id="price"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>留言：</label><span id="desc"></span>
					</li>
				</ul>
			</div>
			<!--活动报名、改价-->
			<div id="actionArea" class="mui-popover mui-popover-action">
				<h5>活动报名</h5>
				<form class="mui-input-group">
					<div class="mui-input-row price">
						<label>出价（元）</label>
						<input type="number" class="mui-input-clear mui-input" placeholder="请输入">
					</div>
				</form>
				<form class="mui-input-group">
					<div class="mui-input-row msg">
						<label>留言</label>
						<textarea></textarea>
					</div>
				</form>
				<button class="mui-btn btn-main btn-block" data-loading-text = "操作中">确认</button>
			</div>
		</div>
		
		<nav class="mui-bar mui-bar-tab" id="type1">
			<a class="mui-btn btn-main btn-block signUp" href="#actionArea">活动报名</a>
		</nav>
		
		<nav class="mui-bar mui-bar-tab" id="type2">
			<a class="mui-tab-item cancelSignUp">取消报名</a>
			<a class="mui-tab-item updatePrice" href="#actionArea">改价</a>
		</nav>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var selfPage = plus.webview.currentWebview();
				var artshowId = selfPage.artshowId;
				// 演艺图片懒加载1
				var headerLazyLoad = mui('.artshow-detail-title').imageLazyload({
					placeholder: '../images/holder2.png'
					
				});
				var artistList = document.getElementById("artist-list");
				// 报名艺人列表懒加载
				var artistLasyLoad = mui(artistList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				var actionArea = document.getElementById("actionArea");
				var url = baseURL;
				var artshowState; // 交易状态
				var openedType = selfPage.type; // 从哪个页面进入
				if(openedType == 1) { // 通过演艺列表进入
					url += 'perf/getPerf/' + artshowId + '.json';
					$('#type1').show();
					$("header .mui-pull-right").show();
				} else { // 通过我参加的演艺进入
					url += 'perf/getPerfOfEntry/' + artshowId + '.json';
					$("header .mui-pull-right").hide();
					artshowState = selfPage.state;
					console.log(artshowState);
					if(artshowState == 4) { // 取消报名后可以重新报名
						$('#type1').show();
					} else if(artshowState == 8) { // 被雇佣时可以接受邀请
						$('#type1').show().find('.signUp').text('接受邀请');
					} else {
						$('#type2').show();
						$(".entry-state").show().find('span.state-icon').addClass('deal-state-' + artshowState).text(Common.dealState[artshowState]);
					}
				}
				var self = false; // 自己发布的演艺
				var ownSignUp = false; // 自己已经报名
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					var data;
					if(openedType == 2) {
						if(data.code == 1) {
							data = data.perfor;
						} else {
							mui.toast('加载失败，请稍后再试');
							return;
						}
					} else {
						data = data;
					}
					$.each(data, function(i, o) {
						if(!/^(type|artistList|self|salary|signup|pic|price)$/.test(i)) {
							$("#" + i).text(o);
						} else {
							switch(i) {
								case 'type':
									$("#" + i).text(Common.artshowType[Number(o) - 1]);
									break;
								case 'artistList':
									$("#signUpNum").text(o.length);
									if(o.length) {
										for(var x = 0; x < o.length; x++) {
											var item = document.createElement('li');
											var headPic = Common.artistPic + o[x].id + o[x].pic;
											var str = '<img data-lazyload="' + headPic + '"/>';
											str += '<br /><span class="mui-ellipsis">' + o[x].stageName + '</span>';
											item.innerHTML = str;
											artistList.appendChild(item);
										}
										artistLasyLoad.refresh(true);
									} else {
										Common.showState(artistList.parentNode, '', '该帮办暂时无人报名', 10);
									}
									break;
								case 'self':
									self = o;
									break;
								case 'salary':
									$("#salary").text((Number(o) / 100).toFixed(2));
									break;
								case 'price':
									$("#price").text((Number(o) / 100).toFixed(2));
									break;
								case 'signup':
									ownSignUp = o;
									break;
								case 'pic':
									var headPic = Common.artshowPic + artshowId + o + '?' + Math.random();
									$("#artshowPic").attr('data-lazyload', headPic);
									headerLazyLoad.refresh(true);
									break;
								default:
									break;
							}
						}
					});
					plus.nativeUI.closeWaiting();
				}, function(xhr) {
					plus.nativeUI.closeWaiting();
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				// 弹出输入框、修改内容
				mui('nav').on('tap', 'a', function() {
					if(User.islogin()) {
						if($(this).hasClass('signUp')) { // 报名
							if(artshowState == 8) { // 接受邀请
								$(actionArea).find('h5').text('接受雇佣').siblings('form').find('.mui-input-row.price label')
									.text('出价（元）');
								$(actionArea).find('input').val($("#salary").text());
							} else {
								if(self) {
									mui.toast('不允许自己报名');
									return false;
								} else if(ownSignUp){
									mui.toast('您已经报名，不能重复报名');
									return false;
								} else {
									$(actionArea).find('h5').text('活动报名').siblings('form').find('.mui-input-row.price label')
										.text('出价（元）');
									$(actionArea).find('input').val($("#salary").text());
								}
							}
						} else if($(this).hasClass('updatePrice')){ // 改价
							$(actionArea).find('h5').text('改价').siblings('form').find('.mui-input-row.price label')
								.text('价格');
							$(actionArea).find('input').val($("#price").text()).end().find('textarea').val($("#desc").text());
						} else { // 取消报名
							if(!ownSignUp) {
								mui.toast('您已取消报名，请勿重复操作');
								return false;
							} else if(artshowState != 0){
								mui.toast('已成交，不能取消报名');
								return false;
							} else {
								plus.nativeUI.confirm("确认取消报名？", function(e) {
									if(!e.index) {
										Common.ajax({
											url : baseURL + 'myArtPerf/cancel/' + artshowId + '.json'
										}, function(data) {
											console.log(JSON.stringify(data));
											if(data.code == 1) {
												mui.toast('操作成功');
												if(openedType == 2) {
													mui('.mui-popover').popover('hide');
													mui.fire(selfPage.opener(), 'reload');
													mui.back();
												} else {
													selfPage.reload();
												}
											} else if(data.code == -3){
												mui.toast('操作失败，当前为不可取消状态');
											} else {
												mui.toast('操作失败，请稍后再试');
											}
										}, function(xhr) {
											mui.toast('网络异常，请稍后再试');
											console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
										})
									}
								}, '取消报名', ["确定", "取消"]);
							}
						}
					} else {
						mui.toast('请先登录');
						return false;
					}
				})
				
				// 确认报名、改价
				mui(actionArea).on('tap', 'button', function() {
					var selfBtn = this;
					mui(selfBtn).button('loading');
					var price = $(".mui-input-row.price input")[0];
					var msg = $(".mui-input-row.msg textarea")[0];
					var url = baseURL;
					if(price.value && msg.value) {
						if($(this).siblings('h5').text() == '活动报名') {
							url += 'perf/signup.json?peformanceId='+ artshowId + '&price='+ (Number(price.value) * 100).toFixed(0) + '&desc=' + msg.value;
						} else if($(this).siblings('h5').text() == '接受雇佣'){
							url += 'perf/enableInvite/' + artshowId + '.json?desc=' + msg.value + '&price=' + (Number(price.value) * 100).toFixed(0);
						} else {
							url += 'myArtPerf/updatePrice/' + artshowId + '.json?price=' + (Number(price.value) * 100).toFixed(0) + '&description=' + msg.value;
						}
						console.log(url);
						Common.ajax({
								url : url
							}, function(data) {
							console.log(JSON.stringify(data));
							mui(selfBtn).button('reset');
							if(data.code == 1) {
								mui.toast('操作成功');
								if(openedType == 2) {
									mui('.mui-popover').popover('hide');
									mui.fire(selfPage.opener(), 'reload');
									mui.back();
								} else {
									selfPage.reload();
								}
							} else {
								mui.toast('操作失败，' + data.msg);
							}
						}, function(xhr) {
							mui(selfBtn).button('reset');
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui(selfBtn).button('reset');
						mui.toast('您填写的信息不符合规范！');
					}
				})
			})
		</script>
	</body>

</html>